<template>
  <div class="care">
    <CuSerTop :Tab="tab"></CuSerTop>
    <div class="care-center">
      <!-- 搜索 -->
      <div class="header">
        <form action="/">
          <van-search v-model="value" show-action placeholder="客户名称/拜访标题" action-text="搜索" />
        </form>
      </div>
      <!-- 列表 -->
      <div class="list">
        <div class="list-in">
          <div class="list-left">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F07%2F20210307164111_2223d.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641200353&t=096e08a17880c6b4379956d17d70f059"
              alt
            />
          </div>
          <ul class="list-right">
            <li>
              <div>
                拜访标题
                <span>重要商务会议拜访</span>
              </div>
              <div class="icon">定制回访</div>
            </li>
            <li>
              客户名称
              <span>林丹</span>
            </li>
            <li>
              拜访时间
              <span>2018-10-25 14:30</span>
            </li>
          </ul>
        </div>
        <div class="list-in">
          <div class="list-left">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F07%2F20210307164111_2223d.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641200353&t=096e08a17880c6b4379956d17d70f059"
              alt
            />
          </div>
          <ul class="list-right">
            <li>
              <div>
                拜访标题
                <span>重要商务会议拜访</span>
              </div>
              <div class="icon">定制回访</div>
            </li>
            <li>
              客户名称
              <span>林丹</span>
            </li>
            <li>
              拜访时间
              <span>2018-10-25 14:30</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="Tail">
        <div>
          <span>展开更多</span>
          <van-icon name="arrow-down" />
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";

import CuSerTop from '@/components/CareUser/CareUserTop'
//输入框
import { Search } from "vant";
Vue.use(Search);

//图标
import { Icon } from "vant";
Vue.use(Icon);

//联系人列表
import { ContactCard } from "vant";
Vue.use(ContactCard);

export default {
  components: {
    CuSerTop
  },
  data() {
    return {
      value: "",
      tab: { title: '拜访记录', righttext: '新增', path: '/newuser' }
    };
  },
};
</script>
 
<style lang = "less" scoped>
.care {
  background: #f5f5f5;
  height: 100vh;
  .care-center {
    /* 搜索框 */
    .header {
      margin: 40px 0;
      width: 100%;
      background: white;
      /deep/form {
        padding: 10px 20px;
        margin: 10px 0;
        .van-search {
          .van-search__content {
            background: #f6f6f6;
            border-radius: 50px;
            overflow: hidden;
            border: 1px solid #000;
            margin-right: 50px;
            padding: 5px 20px;
            .van-cell {
              align-items: center;
              .van-cell__value,
              .van-field__left-icon {
                margin-left: 20px;
              }
            }
          }
        }
        .van-search__action {
          color: #173399;
          font-size: 35px;
          font-weight: 600;
        }
      }
    }
    /* 列表 */
    .list {
      margin-top: 50px;
      .list-in {
        display: flex;
        padding: 0 30px;
        align-items: center;
        border-bottom: 0.5px solid #000;
        background: white;
        .list-left {
          padding: 20px 0;
          img {
            height: 150px;
            width: 150px;
          }
        }
        .list-right {
          margin-left: 20px;
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
          li {
            line-height: 50px;
            color: #cacaca;
            font-size: 30px;
            & > span {
              color: #4f4f4f;
              font-size: 30px;
            }
            &:nth-child(1) {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 30px;
              span {
                color: #4f4f4f;
              }
              .icon {
                color: #fec588;
                outline: 1px solid #fec588;
                font-size: 1px;
              }
            }
          }
        }
      }
    }
    .Tail {
      background: white;
      display: flex;
      align-items: center;
      div {
        margin: auto;
        padding: 25px 0;
        color: #486ab0;
        span {
          margin: 0 10px;
          font-size: 30px;
          font-weight: 700;
        }
        .van-icon {
          color: #486ab0;
          font-size: 30px;
        }
      }
    }
  }
}
</style>